<template>
  <el-dialog
    ref="refDlg"
    :title="formData.id ? '编辑' : '新增'"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="refForm" :rules="formRules" :model="formData" size="mini" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期:" prop="positionName">
              {{ detailData.fillTime?detailData.fillTime.slice(0,10):nowTime(true) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择', trigger: 'change' }]" label="是否有进展:" prop="isHaveProgress">
              <el-radio-group v-model="formData.isHaveProgress">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-show="formData.isHaveProgress" :rules="[{ required: formData.isHaveProgress, message: '请选择', trigger: 'change' }]" label="有无意向商家:" prop="haveIntentionDealer">
              <el-radio-group v-model="formData.haveIntentionDealer">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-show="formData.isHaveProgress" :rules="[{ required: formData.isHaveProgress, message: '请选择', trigger: 'change' }]" label="本月希望报图率:" prop="mapReportRate">
              <el-radio-group v-model="formData.mapReportRate">
                <el-radio label="A">高</el-radio>
                <el-radio label="B">低</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-show="formData.isHaveProgress" style="margin:10px auto;width:90%;color:#999"><i style="color:#E6A23C;font-size:16px" class="el-icon-warning" />不允许填沟通中/洽谈中，需从与意向商家谈至什么阶段、卖场位置如何、租约洽谈如何、计划何时提报选址/测绘、面积大小等方面进行详细阐述。</div>

        <el-form-item v-show="formData.isHaveProgress" :rules="[{ required: formData.isHaveProgress, message: '请填写', trigger: 'change' }]" label="洽谈情况详细描述:" prop="negotiationSituationDetailed">
          <el-input v-model="formData.negotiationSituationDetailed" maxlength="1000" type="textarea" show-word-limit placeholder="请输入" />
        </el-form-item>

        <el-form-item v-show="formData.isHaveProgress&&formData.mapReportRate==='A'" :rules="[{ required: formData.isHaveProgress&&formData.mapReportRate==='A', message: '请选择', trigger: 'change' }]" label="计划测绘日期:" prop="planSurveyTime">
          <el-date-picker
            v-model="formData.planSurveyTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            clearable
          />
        </el-form-item>
        <el-form-item v-show="formData.isHaveProgress&&formData.mapReportRate==='A'" :rules="[{ required: formData.isHaveProgress&&formData.mapReportRate==='A', message: '请选择', trigger: 'change' }]" label="计划报图日期:" prop="planReportPicTime">
          <el-date-picker
            v-model="formData.planReportPicTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            clearable
          />
        </el-form-item>

      </el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { nowTime } from '@/utils/tool'
import { saveDailyData } from '@/api/channelTask'
export default {
  name: 'AddItem',
  components: { },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    id: {
      type: String,
      default: ''
    },
    channelTaskCode: {
      type: String,
      default: ''
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      nowTime,
      submiting: false,
      formData: {
        channelTaskCode: '',
        id: '',
        fillTime: nowTime(),
        isHaveProgress: undefined,
        haveIntentionDealer: undefined,
        mapReportRate: '',
        negotiationSituationDetailed: '',
        planSurveyTime: '',
        planReportPicTime: ''
      },
      formRules: { }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.formData.id = this.detailData.id
    this.formData.channelTaskCode = this.channelTaskCode
    if (this.detailData.channelTaskCode) this.formData = this.detailData
  },

  methods: {
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = {
      }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交表单处理
    submitForm() {
      if (this.submiting) return
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.submiting = true
          if (!this.formData.isHaveProgress) {
            this.formData = {
              channelTaskCode: this.formData.channelTaskCode,
              haveIntentionDealer: null,
              mapReportRate: '',
              id: this.formData.id,
              isHaveProgress: 0,
              negotiationSituationDetailed: '',
              planReportPicTime: '',
              planSurveyTime: ''
            }
          }
          this.$set(this.formData, 'fillTime', nowTime())
          saveDailyData(this.formData).then(res => {
            this.submiting = false
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.closeDialog()
              const isNew = !this.formData.id // 是否新增数据 true (新增则刷新列表到第一页)/ false (非新增则刷新当前页)
              this.$emit('success', isNew)
            }
          }).catch(() => {
            this.submiting = false
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
</style>
